<template>
    <span class="icons" :class = 'classMap[type]'></span>
</template>

<script type="text/ecmascript-6">
    export default {
      props: {
        type: Number
      },
      created() {
        this.classMap = ['decrease', 'discount', 'special', 'invoice', 'guarantee'];
      }
    };
</script>

<style  lang="scss" rel="stylesheet/scss">
    @import "../../common/scss/mixin.scss";
    .icons{
        display: inline-block;
        width:12px;
        height:12px;
        background-size: 12px 12px;
        margin-right: 2px;
        background-repeat:no-repeat;
        background-position: center;
        &.decrease{
            @include bg-img('decrease_1')
        };
        &.discount{
            @include bg-img('discount_1')
        };
        &.special{
            @include bg-img('special_1')
        };
        &.invoice{
            @include bg-img('invoice_1')
        };
        &.guarantee{
            @include bg-img('guarantee_1')
        };
    }
</style>
